<template>
    <div class="panel-set flex-column">
<!--        <div class="option-item flex-column" v-for="(item, index) in chartOptions" :key="item.key">-->
        <div class="option-item flex-column" v-for="item in chartOptions" :key="item.key">
            <div class="info-item title-item flex-row flex-item">
                <span class="title flex1">{{item.name}}</span>
                <el-switch
                        v-model="pannelConfig[item.key].show"
                        active-color="#13ce66"
                        inactive-color="#cccccc">
                </el-switch>
            </div>
            <div class="info-item flex-row flex-item">
                <p class="label">展示维度：</p>
                <el-checkbox-group v-model="pannelConfig[item.key].series">
                    <el-checkbox
                            v-for="option in item.series"
                            :key="option.key"
                            :label="option.label">
                    </el-checkbox>
                </el-checkbox-group>
            </div>
        </div>
        <div class="flex1"></div>
        <div class="flex-row">
            <div class="flex1"></div>
            <el-button @click="reset">恢复默认</el-button>
        </div>
    </div>
</template>

<script>
import { pannelConfig, chartOptions } from '../modules/config';

export default {
  name: 'panelSet',
  props: {
    optionsDefaultVals: {
      required: false,
      type: Object
    }
  },
  data() {
    return {
      pannelConfig,
      chartOptions
    }
  },
  methods: {
    reset() {
      this.pannelConfig = JSON.parse(JSON.stringify(pannelConfig))
    }
  },
  mounted() {
    if (this.optionsDefaultVals) {
      this.pannelConfig = { ...this.optionsDefaultVals }
    }
  },
  watch: {
    pannelConfig: {
      handler(N) {
        this.$emit('change', N)
      },
      immediate: false,
      deep: true
    }
  }
}
</script>

<style lang="scss" scoped>
    .panel-set {
        padding: 0 20px;
        height: 100%;
        box-sizing: border-box;
        padding-bottom: 20px;
        .option-item {
            margin-bottom: 20px;
            .title-item {
                background: #f1f1f1;
                border-radius: 4px;
                .title {
                    margin-left: -20px;
                    padding-left: 20px;
                    line-height: 40px;
                    font-weight: bold;
                }
            }
            .info-item {
                padding: 0 20px;
                margin-bottom: 15px;
            }
        }
    }
</style>